<template>
  <div class="lifecycle-page" v-loading="pageLoading" 
       element-loading-text="正在加载数据..." 
       element-loading-background="rgba(13, 14, 26, 0.9)"
       element-loading-svg-view-box="-10, -10, 50, 50"
       :element-loading-svg="loadingSvg">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="logo">
        <div class="logo-icon">
          <el-icon><DataAnalysis /></el-icon>
        </div>
        <div class="logo-text">NEWBE工作室</div>
      </div>
      
      <ul class="nav-items">
        <li class="nav-item">
          <router-link to="/rfm-analysis" class="nav-link">RFM客户行为分析</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/customer-lifecycle" class="nav-link active">客户生命周期</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/marketing-analysis" class="nav-link">营销活动分析</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/sales-prediction" class="nav-link">销售预测</router-link>
        </li>
      </ul>
      
      <div class="user-profile">
        <div class="user-avatar">{{ userInitial }}</div>
      </div>
    </nav>

    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button 
        class="back-button" 
        type="primary" 
        size="small" 
        @click="goBack"
      >
        <el-icon><Back /></el-icon>
        返回工作台
      </el-button>
    </div>

    <!-- 主要内容区域 -->
    <div class="container">
      <!-- 标题和刷新按钮 -->
      <div class="header">
        <h1 class="title">客户生命周期分析</h1>
        <el-button class="refresh-btn" type="primary" @click="generateAnalysis">
          <el-icon><RefreshRight /></el-icon>
          生成分析
        </el-button>
      </div>
      
      <!-- 生命周期流程图 -->
      <div class="lifecycle-flow">
        <div v-for="(stage, index) in lifecycleStages" :key="index" class="lifecycle-stage">
          <div class="stage-icon">
            <el-icon v-if="stage.icon === 'user-plus'"><UserFilled /></el-icon>
            <el-icon v-else-if="stage.icon === 'rocket'"><Promotion /></el-icon>
            <el-icon v-else-if="stage.icon === 'sync-alt'"><RefreshLeft /></el-icon>
            <el-icon v-else-if="stage.icon === 'shopping-cart'"><ShoppingCart /></el-icon>
            <el-icon v-else-if="stage.icon === 'bullhorn'"><Bell /></el-icon>
          </div>
          <div class="stage-name">{{ stage.name }}</div>
          <div class="stage-value">{{ stage.value }}</div>
        </div>
      </div>
      
      <!-- 数据统计卡片 -->
      <div class="stats-cards">
        <div v-for="(stat, index) in lifeCycleStats" :key="index" class="stat-card">
          <div class="stat-icon">
            <el-icon v-if="stat.icon === 'handshake'"><Coin /></el-icon>
            <el-icon v-else-if="stat.icon === 'yen-sign'"><Money /></el-icon>
            <el-icon v-else-if="stat.icon === 'chart-line'"><TrendCharts /></el-icon>
            <el-icon v-else-if="stat.icon === 'users'"><Avatar /></el-icon>
          </div>
          <div class="stat-value" v-html="stat.value"></div>
          <div class="stat-label">{{ stat.name }}</div>
          <div :class="['stat-change', stat.change_type]">
            <el-icon v-if="stat.change > 0"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            {{ Math.abs(stat.change) }}% 较上月
          </div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="charts-section">
        <!-- 客户生命周期漏斗图表 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">客户生命周期漏斗</h3>
          </div>
          <div class="chart-container" ref="lifecycleFunnelChart"></div>
        </div>
        
        <!-- 客户留存率图表 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">客户留存率趋势</h3>
          </div>
          <div class="chart-container" ref="retentionRateChart"></div>
        </div>
        
        <!-- 客户转化路径图表 -->
        <div class="chart-card full-width">
          <div class="chart-header">
            <h3 class="chart-title">客户转化路径分析</h3>
          </div>
          <div class="chart-container" ref="conversionPathChart"></div>
        </div>
      </div>
      
      <!-- 客户生命周期分析表格 -->
      <div class="table-section">
        <div class="table-header">
          <h3 class="table-title">客户生命周期分析详情</h3>
          <div class="search-box">
            <el-input
              v-model="searchQuery"
              placeholder="搜索客户"
              prefix-icon="Search"
              clearable
              class="search-input"
            />
          </div>
        </div>
        
        <el-table
          :data="paginatedTableData"
          border
          style="width: 100%"
          class="data-table"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="customer_name" label="客户名称" />
          <el-table-column prop="stage" label="当前阶段">
            <template #default="scope">
              <el-tag
                :type="getTagType(scope.row.stage)"
                effect="dark"
                class="tag"
                :style="{
                  padding: '0.3rem 0.8rem',
                  borderRadius: '20px',
                  fontSize: '0.8rem',
                  fontWeight: '600',
                  display: 'inline-block'
                }"
              >
                {{ scope.row.stage }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="在此阶段时长" />
          <el-table-column prop="activity" label="活跃度" />
          <el-table-column prop="last_interaction" label="近期互动" />
          <el-table-column prop="value" label="客户价值" />
          <el-table-column prop="prediction" label="生命周期预测" />
          <el-table-column prop="risk" label="流失风险">
            <template #default="scope">
              <el-tag
                :type="getRiskTagType(scope.row.risk)"
                effect="dark"
                class="tag"
                :style="{
                  padding: '0.3rem 0.8rem',
                  borderRadius: '20px',
                  fontSize: '0.8rem',
                  fontWeight: '600',
                  display: 'inline-block'
                }"
              >
                {{ scope.row.risk }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="recommendation" label="推荐操作">
            <template #default="scope">
              <el-tag
                :type="getRecommendationTagType(scope.row.recommendation)"
                effect="dark"
                class="tag"
                :style="{
                  padding: '0.3rem 0.8rem',
                  borderRadius: '20px',
                  fontSize: '0.8rem',
                  fontWeight: '600',
                  display: 'inline-block'
                }"
              >
                {{ scope.row.recommendation }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredTableData.length"
            :page-sizes="[5, 10, 20, 50]"
            background
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
            :pager-count="5"
            class="custom-pagination"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue';
import { useUserStore } from '@/stores/user';
import * as echarts from 'echarts';
import { 
  getLifecycleSummary, 
  getLifecycleStats, 
  getLifecycleDetails,
  getLifecycleFunnel,
  getRetentionRateData,
  getConversionPathData
} from '@/api/customer-lifecycle';
import { 
  Back, 
  DataAnalysis, 
  RefreshRight, 
  UserFilled, 
  Promotion, 
  RefreshLeft, 
  ShoppingCart, 
  Bell, 
  Coin, 
  Money, 
  TrendCharts, 
  Avatar, 
  ArrowUp, 
  ArrowDown 
} from '@element-plus/icons-vue';

// 返回工作台
function goBack() {
  window.location.href = 'dashboard#/dashboard';
}

// 用户信息
const userStore = useUserStore();
const userInitial = computed(() => {
  if (userStore.userInfo && userStore.userInfo.nickname) {
    return userStore.userInfo.nickname.charAt(0).toUpperCase();
  }
  return 'U';
});

// 应用自定义样式
const applyCustomStyles = () => {
  // 创建一个新的 style 元素
  const styleElement = document.createElement('style');
  styleElement.id = 'lifecycle-custom-styles';
  
  // 定义样式内容
  styleElement.textContent = `
    .lifecycle-page .el-table, 
    .lifecycle-page .el-table__inner-wrapper {
      background-color: var(--card-bg) !important;
    }
    
    .lifecycle-page .el-table tr {
      background-color: var(--card-bg) !important;
    }
    
    .lifecycle-page .el-table th.el-table__cell {
      background-color: rgba(42, 42, 87, 0.8) !important;
      color: var(--secondary-color) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    .lifecycle-page .el-table td.el-table__cell {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    .lifecycle-page .el-table--border .el-table__cell {
      border-right: 1px solid var(--border-color) !important;
    }
    
    .lifecycle-page .el-table--border:after,
    .lifecycle-page .el-table--border:before,
    .lifecycle-page .el-table__inner-wrapper:after,
    .lifecycle-page .el-table__inner-wrapper:before {
      background-color: var(--border-color) !important;
    }
    
    .lifecycle-page .el-table tr:hover > td.el-table__cell {
      background-color: var(--hover-color) !important;
    }
    
    /* 分页器和输入框样式 */
    .lifecycle-page .el-pagination button,
    .lifecycle-page .el-pagination .el-pager li {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
      border: 1px solid var(--border-color) !important;
    }
    
    .lifecycle-page .el-pagination .el-pager li.is-active {
      background: var(--gradient-primary) !important;
      color: white !important;
      border: none !important;
    }
    
    /* 搜索框样式 */
    .lifecycle-page .search-box .el-input__wrapper,
    .lifecycle-page .search-input .el-input__wrapper {
      background-color: var(--card-bg) !important;
      box-shadow: 0 0 0 1px var(--border-color) inset !important;
    }
    
    .lifecycle-page .search-box .el-input__inner,
    .lifecycle-page .search-input .el-input__inner {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
    }
    
    /* 分页器下拉菜单和输入框 */
    .lifecycle-page .el-pagination .el-select__wrapper,
    .lifecycle-page .el-pagination .el-select .el-input__wrapper,
    .lifecycle-page .el-pagination .el-input .el-input__wrapper {
      background-color: var(--card-bg) !important;
      box-shadow: 0 0 0 1px var(--border-color) inset !important;
    }
    
    .lifecycle-page .el-pagination__sizes .el-select,
    .lifecycle-page .el-pagination__jump .el-input {
      margin: 0 5px !important;
    }
    
    .lifecycle-page .el-pagination__jump {
      color: var(--text-color) !important;
    }
    
    .lifecycle-page .el-pagination__editor.el-input .el-input__inner {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
    }
    
    .lifecycle-page .el-loading-mask {
      background-color: rgba(10, 11, 26, 0.9) !important;
    }
    
    .lifecycle-page .el-loading-spinner .el-loading-text,
    .lifecycle-page .el-pagination__total {
      color: var(--text-color) !important;
    }
    
    .lifecycle-page .el-table__empty-block {
      background-color: var(--card-bg) !important;
    }
    
    .lifecycle-page .el-table__empty-text {
      color: var(--text-color) !important;
    }

    /* 下拉选择框样式 */
    body .el-select-dropdown {
      background-color: var(--card-bg) !important;
      border-color: var(--border-color) !important;
    }
    
    body .el-select-dropdown__item {
      color: var(--text-color) !important;
    }
    
    body .el-select-dropdown__item.hover,
    body .el-select-dropdown__item:hover {
      background-color: var(--hover-color) !important;
    }
    
    body .el-select-dropdown__item.selected {
      color: var(--secondary-color) !important;
      font-weight: bold !important;
    }
    
    body .el-popper.is-light {
      background-color: var(--card-bg) !important;
      border-color: var(--border-color) !important;
    }
    
    body .el-popper.is-light .el-popper__arrow::before {
      background-color: var(--card-bg) !important;
      border-color: var(--border-color) !important;
    }

    /* 确保所有弹出层保持一致样式 */
    body .el-select__popper,
    body .el-picker__popper,
    body .el-picker-panel,
    body .el-popper {
      background-color: var(--card-bg) !important;
      border-color: var(--border-color) !important;
      color: var(--text-color) !important;
    }

    /* 通用输入框样式覆盖 - 最强力的选择器 */
    .lifecycle-page input,
    .lifecycle-page textarea,
    .lifecycle-page .el-input input,
    .lifecycle-page .el-input textarea,
    .lifecycle-page .el-input__wrapper,
    .lifecycle-page .el-select__wrapper,
    .lifecycle-page .el-select .el-input__wrapper,
    .lifecycle-page .el-select-dropdown__wrap,
    .lifecycle-page .el-pagination .el-input .el-input__inner,
    .lifecycle-page .el-select .el-input__inner,
    .lifecycle-page .el-pagination__editor .el-input__inner,
    .lifecycle-page .el-pagination__editor .el-input__wrapper,
    .lifecycle-page .el-pagination input {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
      border-color: var(--border-color) !important;
      box-shadow: 0 0 0 1px var(--border-color) inset !important;
    }
    
    /* 覆盖所有下拉菜单相关组件 */
    body .el-popper,
    body .el-select-dropdown,
    body .el-select-dropdown__list,
    body .el-select-dropdown__item {
      background-color: var(--card-bg) !important;
      color: var(--text-color) !important;
      border-color: var(--border-color) !important;
    }
    
    /* 覆盖任何可能的白色背景 */
    .lifecycle-page *[style*="background-color: white"],
    .lifecycle-page *[style*="background-color: #fff"],
    .lifecycle-page *[style*="background-color:#fff"],
    .lifecycle-page *[style*="background: white"],
    .lifecycle-page *[style*="background:#fff"],
    .lifecycle-page *[style*="background: #fff"] {
      background-color: var(--card-bg) !important;
      background: var(--card-bg) !important;
    }
  `;
  
  // 添加到文档中
  document.head.appendChild(styleElement);
  
  // 组件卸载时移除样式
  onUnmounted(() => {
    const element = document.getElementById('lifecycle-custom-styles');
    if (element) {
      element.parentNode.removeChild(element);
    }
  });
};

// 生命周期阶段数据
const lifecycleStages = ref([
  { name: '获取', value: 568, icon: 'user-plus' },
  { name: '激活', value: 423, icon: 'rocket' },
  { name: '保留', value: 325, icon: 'sync-alt' },
  { name: '转化', value: 238, icon: 'shopping-cart' },
  { name: '推荐', value: 156, icon: 'bullhorn' }
]);

// 生命周期统计数据
const lifeCycleStats = ref([
  { 
    name: '客户获取成本', 
    value: '¥24,680', 
    change: -6.3, 
    change_type: 'positive',
    icon: 'handshake'
  },
  { 
    name: '客户终身价值', 
    value: '¥86,500', 
    change: 8.2, 
    change_type: 'positive',
    icon: 'yen-sign'
  },
  { 
    name: '客户留存率', 
    value: '74.5%', 
    change: 3.1, 
    change_type: 'positive',
    icon: 'chart-line'
  },
  { 
    name: '客户流失率', 
    value: '28%', 
    change: 1.5, 
    change_type: 'negative',
    icon: 'users'
  }
]);

// 表格数据
const tableData = ref([]);
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(5);
const totalItems = ref(0);
const tableLoading = ref(false);
const pageLoading = ref(true); // 页面整体加载状态

// 加载动画SVG
const loadingSvg = `
  <path class="path" d="
    M 30 15
    L 28 17
    M 25.61 25.61
    A 15 15, 0, 0, 1, 15 30
    A 15 15, 0, 1, 1, 27.99 7.5
    L 15 15
  " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`;

// 图表实例
const lifecycleFunnelChart = ref(null);
const retentionRateChart = ref(null);
const conversionPathChart = ref(null);

// 过滤后的表格数据
const filteredTableData = computed(() => {
  if (!searchQuery.value) {
    return tableData.value;
  }
  return tableData.value.filter(item => {
    return item.customer_name.toLowerCase().includes(searchQuery.value.toLowerCase());
  });
});

// 分页后的表格数据
const paginatedTableData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return filteredTableData.value.slice(startIndex, endIndex);
});

// 根据阶段获取tag类型
const getTagType = (stage) => {
  const tagMap = {
    '获取': 'primary',
    '激活': 'info',
    '保留': 'success',
    '转化': 'warning',
    '推荐': 'danger'
  };
  return tagMap[stage] || 'info';
};

// 根据风险级别获取tag类型
const getRiskTagType = (risk) => {
  const tagMap = {
    '低风险': 'success',
    '中风险': 'warning',
    '高风险': 'danger'
  };
  return tagMap[risk] || 'info';
};

// 根据推荐操作获取tag类型
const getRecommendationTagType = (recommendation) => {
  const tagMap = {
    '升级产品': 'success',
    '提供培训': 'info',
    '交叉销售': 'success',
    '客户挽留': 'warning',
    '奖励推荐': 'primary',
    '定期联系': 'info'
  };
  return tagMap[recommendation] || 'info';
};

// 页码变更处理
const handlePageChange = (val) => {
  currentPage.value = val;
};

// 页面大小变更处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
};

// 表格行的样式
// eslint-disable-next-line no-unused-vars
const tableRowClassName = ({ row, rowIndex }) => {
  return 'table-row';
};

// 初始化漏斗图
const initFunnelChart = (data) => {
  const chartDom = lifecycleFunnelChart.value;
  const chart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    color: ['#3a36db', '#5653ea', '#00c9ff', '#00ffb3', '#ffb800'],
    series: [
      {
        name: '客户生命周期',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside',
          color: '#fff'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#13142a',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data
      }
    ]
  };
  
  chart.setOption(option);
  
  // 窗口大小变化时，重绘图表
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 初始化留存率趋势图
const initRetentionChart = (data) => {
  const chartDom = retentionRateChart.value;
  const chart = echarts.init(chartDom);
  
  const series = data.cohorts.map((cohort, index) => {
    const colors = ['#3a36db', '#00c9ff', '#00ffb3', '#ffb800', '#ff6b6b'];
    return {
      name: cohort.name,
      type: 'line',
      emphasis: {
        focus: 'series'
      },
      lineStyle: {
        width: 3
      },
      symbolSize: 8,
      itemStyle: {
        color: colors[index % colors.length]
      },
      data: cohort.data
    };
  });
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.months,
      axisLine: {
        lineStyle: {
          color: '#2a2a57'
        }
      },
      axisLabel: {
        color: '#e0e0ff'
      }
    },
    yAxis: {
      type: 'value',
      name: '留存率(%)',
      min: 0,
      max: 100,
      axisLine: {
        lineStyle: {
          color: '#2a2a57'
        }
      },
      axisLabel: {
        color: '#e0e0ff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(42, 42, 87, 0.4)'
        }
      }
    },
    series
  };
  
  chart.setOption(option);
  
  // 窗口大小变化时，重绘图表
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 初始化转化路径图
const initConversionPathChart = (data) => {
  const chartDom = conversionPathChart.value;
  const chart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'sankey',
        left: '10%',
        right: '10%',
        emphasis: {
          focus: 'adjacency'
        },
        data: data.nodes,
        links: data.links,
        lineStyle: {
          color: 'gradient',
          curveness: 0.5
        },
        itemStyle: {
          color: function(params) {
            const colors = ['#3a36db', '#5653ea', '#8884ff', '#00c9ff', '#00ffb3', '#ffb800', '#ff6b6b'];
            return colors[params.dataIndex % colors.length];
          }
        },
        label: {
          color: '#e0e0ff'
        }
      }
    ]
  };
  
  chart.setOption(option);
  
  // 窗口大小变化时，重绘图表
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 加载数据
const loadData = async () => {
  try {
    // 设置整个页面为加载状态
    pageLoading.value = true;
    tableLoading.value = true;
    
    // 加载生命周期阶段数据
    const stagesData = await getLifecycleSummary();
    if (stagesData && stagesData.length) {
      lifecycleStages.value = stagesData.map((item, index) => {
        const icons = ['user-plus', 'rocket', 'sync-alt', 'shopping-cart', 'bullhorn'];
        return {
          name: item.stage,
          value: item.count,
          icon: icons[index % icons.length]
        };
      });
    }
    
    // 加载生命周期统计数据
    const statsData = await getLifecycleStats();
    if (statsData && statsData.length) {
      const icons = ['handshake', 'yen-sign', 'chart-line', 'users'];
      lifeCycleStats.value = statsData.map((item, index) => {
        return {
          name: item.name,
          value: item.value,
          change: item.change,
          change_type: item.change_type,
          icon: icons[index % icons.length]
        };
      });
    }
    
    // 加载表格数据
    const detailsData = await getLifecycleDetails();
    if (detailsData && detailsData.length) {
      tableData.value = detailsData;
      totalItems.value = detailsData.length;
    }
    
    // 加载漏斗图数据（静态数据）
    const funnelData = await getLifecycleFunnel();
    initFunnelChart(funnelData);
    
    // 加载留存率趋势数据（静态数据）
    const retentionData = await getRetentionRateData();
    initRetentionChart(retentionData);
    
    // 加载转化路径数据（静态数据）
    const conversionData = await getConversionPathData();
    initConversionPathChart(conversionData);
  } catch (error) {
    console.error('加载数据失败:', error);
  } finally {
    // 无论成功或失败，都关闭加载状态
    setTimeout(() => {
      tableLoading.value = false;
      pageLoading.value = false;
    }, 500); // 添加短暂延迟，确保UI更新
  }
};

// 生成分析
const generateAnalysis = () => {
  pageLoading.value = true; // 设置整页加载状态
  loadData();
};

// 组件挂载时加载数据
onMounted(() => {
  // 应用自定义样式
  applyCustomStyles();
  
  // 等待DOM渲染完成
  setTimeout(() => {
    loadData();
  }, 100);
});
</script>

<style>
:root {
  --primary-color: #3a36db;
  --secondary-color: #00c9ff;
  --accent-color: #00ffb3;
  --dark-bg: #0a0b1a;
  --card-bg: #13142a;
  --text-color: #e0e0ff;
  --border-color: #2a2a57;
  --hover-color: #2d2d69;
  --gradient-primary: linear-gradient(135deg, #3a36db, #00c9ff);
  --gradient-secondary: linear-gradient(135deg, #00c9ff, #00ffb3);
  --box-shadow: 0 8px 32px rgba(0, 201, 255, 0.1);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.lifecycle-page {
  background-color: var(--dark-bg);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* 导航栏样式 */
.navbar {
  background-color: var(--card-bg);
  padding: 0.8rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 600;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-items {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  list-style: none;
  position: relative;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
}

.nav-link.active {
  color: var(--secondary-color);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-secondary);
  border-radius: 3px;
}

.nav-link:hover {
  color: var(--secondary-color);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-bg);
  font-weight: bold;
}

/* 内容区域样式 */
.container {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  overflow: visible;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.refresh-btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
}

.refresh-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(58, 54, 219, 0.4);
}

/* 生命周期流程图 */
.lifecycle-flow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.lifecycle-flow::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: var(--gradient-primary);
  z-index: 0;
}

.lifecycle-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.stage-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--card-bg);
  border: 4px solid var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: var(--secondary-color);
  box-shadow: 0 0 20px rgba(0, 201, 255, 0.2);
}

.stage-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.stage-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* 数据卡片组 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 201, 255, 0.15);
  border-color: var(--secondary-color);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at top right, rgba(0, 201, 255, 0.1), transparent 70%);
  border-radius: 50%;
}

.stat-icon {
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 1rem;
  background: rgba(58, 54, 219, 0.1);
  color: var(--secondary-color);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: var(--gradient-secondary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 1rem;
  color: rgba(224, 224, 255, 0.8);
}

.stat-change {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.positive {
  color: var(--accent-color);
}

.negative {
  color: #ff6b6b;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.chart-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.chart-container {
  height: 300px;
  width: 100%;
}

.full-width {
  grid-column: 1 / -1;
}

/* 表格区域 */
.table-section {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  margin-bottom: 2rem;
  max-height: none;
  overflow: visible;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.table-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.search-box {
  width: 250px;
}

.search-input {
  background-color: rgba(42, 42, 87, 0.4);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.search-input :deep(.el-input__inner) {
  background-color: transparent;
  color: var(--text-color);
}

.search-input :deep(.el-input__prefix) {
  color: rgba(224, 224, 255, 0.6);
}

.data-table {
  margin-bottom: 1rem;
}

.table-row:hover td {
  background-color: var(--hover-color) !important;
}

.tag {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.custom-pagination :deep(.el-pagination__total),
.custom-pagination :deep(.el-pagination__jump),
.custom-pagination :deep(.el-pagination button),
.custom-pagination :deep(.el-pager li) {
  background-color: rgba(42, 42, 87, 0.4);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.custom-pagination :deep(.el-pager li.is-active) {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.custom-pagination :deep(.el-pagination button:hover),
.custom-pagination :deep(.el-pager li:hover) {
  background-color: var(--hover-color);
}

/* 全页面加载样式 */
.lifecycle-page > .el-loading-mask {
  z-index: 9999 !important;
  background-color: rgba(10, 11, 26, 0.9) !important;
}

.lifecycle-page > .el-loading-mask .el-loading-spinner {
  margin-top: -60px !important;
}

.lifecycle-page > .el-loading-mask .el-loading-spinner .el-loading-text {
  font-size: 16px !important;
  color: var(--secondary-color) !important;
  margin-top: 15px !important;
}

.lifecycle-page > .el-loading-mask .el-loading-spinner .path {
  stroke-width: 3 !important;
  stroke: var(--secondary-color) !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }

  .lifecycle-flow {
    flex-wrap: wrap;
  }

  .lifecycle-flow::before {
    display: none;
  }

  .lifecycle-stage {
    width: 45%;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0.8rem 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-items {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .container {
    padding: 1rem;
  }

  .lifecycle-stage {
    width: 100%;
  }
}

/* 修改表格样式，仅作用于此组件 */
.lifecycle-page .data-table {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* 直接覆盖Element Plus的表格样式 */
.lifecycle-page .el-table,
.lifecycle-page .el-table__inner-wrapper {
  background-color: var(--card-bg) !important;
}

.lifecycle-page .el-table tr {
  background-color: var(--card-bg) !important;
}

.lifecycle-page .el-table th.el-table__cell {
  background-color: rgba(42, 42, 87, 0.8) !important;
  color: var(--secondary-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.lifecycle-page .el-table td.el-table__cell {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.lifecycle-page .el-table--border .el-table__cell {
  border-right: 1px solid var(--border-color) !important;
}

.lifecycle-page .el-table--border:after,
.lifecycle-page .el-table--border:before,
.lifecycle-page .el-table__inner-wrapper:after,
.lifecycle-page .el-table__inner-wrapper:before {
  background-color: var(--border-color) !important;
}

/* 表格行悬停效果 */
.lifecycle-page .el-table tr:hover > td.el-table__cell {
  background-color: var(--hover-color) !important;
}

/* 分页器样式 */
.lifecycle-page .el-pagination .btn-prev,
.lifecycle-page .el-pagination .btn-next,
.lifecycle-page .el-pagination .el-pager li {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.lifecycle-page .el-pagination .el-pager li.is-active {
  background: var(--gradient-primary) !important;
  color: white !important;
  border: none !important;
}

.lifecycle-page .el-pagination .el-input__inner,
.lifecycle-page .el-select-dropdown {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

.lifecycle-page .el-select-dropdown__item {
  color: var(--text-color) !important;
}

.lifecycle-page .el-select-dropdown__item.hover,
.lifecycle-page .el-select-dropdown__item:hover {
  background-color: var(--hover-color) !important;
}

.lifecycle-page .el-pagination__total {
  color: var(--text-color) !important;
}

/* 表格加载状态 */
.lifecycle-page .el-loading-mask {
  background-color: rgba(10, 11, 26, 0.9) !important;
}

.lifecycle-page .el-loading-spinner {
  color: var(--secondary-color) !important;
}

.lifecycle-page .el-loading-spinner .path {
  stroke: var(--secondary-color) !important;
}

.lifecycle-page .el-loading-spinner .el-loading-text {
  color: var(--text-color) !important;
}

/* 表格空数据状态 */
.lifecycle-page .el-table__empty-block {
  background-color: var(--card-bg) !important;
}

.lifecycle-page .el-table__empty-text {
  color: var(--text-color) !important;
}

/* 滚动条样式 */
.lifecycle-page .el-scrollbar__bar {
  background-color: var(--border-color) !important;
}

.lifecycle-page .el-scrollbar__thumb {
  background-color: var(--secondary-color) !important;
  opacity: 0.3;
}

.lifecycle-page .el-scrollbar__thumb:hover {
  opacity: 0.5;
}

/* 分页器完善 */
.lifecycle-page .custom-pagination {
  margin-top: 1.5rem;
}

.lifecycle-page .el-pagination__jump {
  color: var(--text-color) !important;
}

/* 添加返回按钮样式 */
.back-button-container {
  padding: 12px 24px;
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gradient-primary);
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(58, 54, 219, 0.3);
}

.back-button:hover {
  box-shadow: 0 4px 12px rgba(58, 54, 219, 0.5);
  transform: translateY(-2px);
}
</style> 